<template>
    <view class="custom-tabbar">
        <!-- 底部tab容器 -->
        <view class="tabbar-container" :style="tabBarStyle">
            <!-- 循环渲染tab项 -->
            <view
                class="tab-item"
                v-for="(item, index) in tabList"
                :key="index"
                @click="handleTabClick(index)"
                :class="{ 'tab-item-active': currentIndex === index }"
            >
                <!-- 中间突出的tab项特殊处理 -->
                <view v-if="index === centerIndex" class="center-tab-wrapper">
                    <view class="center-tab-icon">
                        <image :src="currentIndex === index ? item.selectedIconPath : item.iconPath" mode="widthFix"></image>
                    </view>
                    <!-- 移除"上报"文字 -->
                </view>

                <!-- 普通tab项 -->
                <view v-else class="normal-tab">
                    <image
                        :src="currentIndex === index ? item.selectedIconPath : item.iconPath"
                        class="tab-icon"
                        mode="widthFix"
                    ></image>
                    <text :style="{ color:  currentIndex === index ?'#25772f':'#666'} " class="tab-text" >{{ item.text }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'CustomTabbar',
    props: {
        // 当前选中索引
        currentIndex: {
            type: Number,
            default: 0
        },
        // 中间突出项的索引
        centerIndex: {
            type: Number,
            default: 1
        },
        // 自定义样式
        tabBarStyle: {
            type: Object,
            default: () => ({
                backgroundColor: '#ffffff',
                boxShadow: '0 -2px 10px rgba(0, 0, 0, 0.05)',
                height: '50px'
            })
        },
        // 中间按钮样式
        centerTabStyle: {
            type: Object,
            default: () => ({
                width: '60px',
                height: '60px',
                backgroundColor: '#007AFF',
                borderRadius: '50%',
                boxShadow: '0 2px 10px rgba(0, 122, 255, 0.3)'
            })
        },
        // 激活状态文本样式
        activeTextStyle: {
            type: Object,
            default: () => ({
                color: '#25772f'+'!important',
                fontWeight: 'bold'
            })
        }
    },
    data() {
        return {
            // tab配置列表（和pages.json中的配置保持一致）
            tabList: [
                {
                    "pagePath": "/pages/index/index",
                    "iconPath": "/static/rm.png",
                    "selectedIconPath": "/static/rm1.png",
                    "text": "热门"
                }, {
                    "pagePath": "/pages/release/release",
                    "iconPath": "/static/fabu.png",
                    "selectedIconPath": "/static/fabu.png",
                    "text": "上报",
                    "custom": true
                }, {
                    "pagePath": "/pages/my/my",
                    "selectedIconPath": "/static/wd1.png",
                    "iconPath": "/static/wd.png",
                    "text": "我的"
                }
            ]
        }
    },
    methods: {
        // 处理tab点击
        handleTabClick(index) {
            // 触发父组件事件
            this.$emit('tabChange', index)

            // 特殊处理：如果是上报页面且当前已在上报页面，发送重置事件
            if (index === this.currentIndex && index === 1) {
                // 发送全局事件通知上报页面重置表单
                uni.$emit('resetReleaseForm')
                return
            }

            // 防止其他页面重复点击
            if (index === this.currentIndex) return

            // 如果点击的是"热门"tab（索引为0），设置全局标记
            if (index === 0) {
                const app = getApp();
                if (app) {
                    app.globalData = app.globalData || {};
                    app.globalData.clickedHotTab = true;
                }
            }

            // 执行页面跳转
            uni.switchTab({
                url: this.tabList[index].pagePath,
                fail: (err) => {
                    console.error('tab跳转失败:', err)
                }
            })
        }
    }
}
</script>

<style scoped>
.tabbar-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: 120rpx;
    background: #fff;
    box-sizing: border-box;
    padding:10rpx 0 ;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
    /* 可选：增加z-index确保投影显示在页面内容上方 */
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.normal-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tab-icon {
    width: 24px;
    height: 24px;
}

.tab-text {
    font-size: 14px;
    margin-top: 2px;
    color: #666666;
}

/* 中间突出按钮样式 */
.center-tab-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center; /* 居中对齐 */
    justify-content: center; /* 居中对齐 */
}

.center-tab-text {
    font-size: 14px;
    /* 移除文字显示 */
    display: none;
}

.center-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 调整位置使图标居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 精确居中 */
}

.center-tab-icon image {
    width: 50px;
    height: 50px;
    color: #ffffff; /* 图标颜色 */
}
.tab-item-active{
    color: #25772f; /* 图标颜色 */
}
</style>
